{{Template:SZPT-CHINA/head}}
<html>

<head>

</head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">


<script>
    $(document).ready(function () {
        var loadImg = document.getElementById('downContent');//选取id为test的元素
        loadImg.style.display = 'none';	// 隐藏选择的元素
        //加载适配
        init();
        var loadImg = document.getElementById('loadImg');//选取id为test的元素
        loadImg.style.display = 'block';	// 隐藏选择的元素

    });


    //BEGIN-loading
    var loadhidekey = 0;

    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function () {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);
        init();


        setTimeout(function () {
            //$("#loaderDownId").hide();
            //滑到顶部
            document.body.scrollTop = document.documentElement.scrollTop = 0;
            loadhidekey = 1
            $("#directory").hide();
            $("#loadingHome").hide();

            var loadImg = document.getElementById('downContent');//选取id为test的元素
            loadImg.style.display = 'block';	// 隐藏选择的元素
            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
            // $("#loading").hide();
        }, 100);
    }



    //定位
    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function () {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function () {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function () {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }
        document.getElementById("dir4").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content4');
            animateScroll(target, 250);
        }
        document.getElementById("dir5").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content5');
            animateScroll(target, 250);
        }
        //
        var value = document.getElementById('dir1').getAttribute("style")
        value = value.replace(/ffffff/, "fffea4")
        $("#dir1").attr("style", value);
        $("#content1Key").fadeIn(500);
        $("#content2Key").fadeOut(500);
        $("#content3Key").fadeOut(500);
        $("#content4Key").fadeOut(500);
        $("#content5Key").fadeOut(500);



        document.getElementById("dir1").onclick = function () {

            $("#content1Key").fadeIn(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);




            var dir1key = 0;
            if (dir1key == 0) {
                let target = document.getElementById('content1Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();





                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir1").attr("style", value);


                dir1key = 1;
            } else {
                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);
                dir1key = 0
            }

        }
        document.getElementById("dir2").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeIn(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);



            var dir2key = 0;
            if (dir2key == 0) {
                let target = document.getElementById('content2Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();




                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                dir2key = 1;
            } else {
                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);
                dir2key = 0
            }
        }
        document.getElementById("dir3").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeIn(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);



            var dir3key = 0;
            if (dir3key == 0) {
                let target = document.getElementById('content3Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();





                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);


                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);

                dir3key = 1;
            } else {
                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);
                dir3key = 0
            }
        }
        document.getElementById("dir4").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeIn(500);
            $("#content5Key").fadeOut(500);



            var dir4key = 0;
            if (dir4key == 0) {
                let target = document.getElementById('content4Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();





                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                dir4key = 1;
            } else {
                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);
                dir4key = 0
            }
        }
        document.getElementById("dir5").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeIn(500);



            var dir5key = 0;
            if (dir5key == 0) {
                let target = document.getElementById('content5Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();





                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                dir5key = 1;
            } else {
                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);
                dir5key = 0
            }
        }


    });
    $(window).scroll(function () {

        if (loadhidekey == 1) {
            if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
                $("#directory").show();
            } else {
                $("#directory").hide();
            }
        }
    });

</script>

<script>

    $(document).ready(function () {

        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", pNo);
        $("#bg1").attr("style", bgNo);

        $("#p2").attr("style", pNo);
        $("#bg2").attr("style", bgNo);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);

        $("#p4").attr("style", p);
        $("#bg4").attr("style", bg);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m1").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Human_Practices";
        });
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Communication";
        });
        $("#m3").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Education";
        });
        $("#m4").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Inclusivity";
        });

    });
</script>
<script>

    $(document).ready(function () {

        // $("#dir1").hover(function () {
        //     var value = document.getElementById('dir1').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir1").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir1').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir1").attr("style", value);
        // });

        // $("#dir2").hover(function () {
        //     var value = document.getElementById('dir2').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir2").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir2').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir2").attr("style", value);
        // });

        // $("#dir3").hover(function () {
        //     var value = document.getElementById('dir3').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir3").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir3').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir3").attr("style", value);
        // });
        // $("#dir4").hover(function () {
        //     var value = document.getElementById('dir4').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir4").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir4').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir4").attr("style", value);
        // });

        // $("#dir5").hover(function () {
        //     var value = document.getElementById('dir5').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir5").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir5').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir5").attr("style", value);
        // });
    });
</script>

<body class="pc" id="main">

    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height: 115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 2%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>

    <div id="downContent">
        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/3/3c/T--SZPT-CHINA--HP-Practice.png"
                        class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/0/0c/T--SZPT-CHINA--HP-Communcation.png"
                        class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p3" src="https://2021.igem.org/wiki/images/6/62/T--SZPT-CHINA--HP-education.png"
                        class="smallImg"></image>
                </div>
                <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p4" src="https://2021.igem.org/wiki/images/d/da/T--SZPT-CHINA--HP-Inclusivity.png"
                        class="smallImg"></image>
                </div>
            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/d/d9/T--SZPT-CHINA--Inclusivity-font.png"
                    style="margin-top: -50px;margin-left: 545px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 480px;">
                </div>
                <div id="m3"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 960px;">
                </div>
                <div id="m4"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1440px;">
                </div>
            </div>

        </div>




        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 18000px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div
                    style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 18vw;">
                    <h3 id="dir0p" style="color:#fffea4;padding-left: 10%;font-size:1.8rem;">
                        Inclusivity</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1" style="color:#ffffff;width: auto;height: 6vh;margin-top: 3vh;">
                            <p id="dir1p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Introduction
                            </p>
                        </div>

                        <div id="dir2" style="color:#ffffff;width: auto;height:6vh;">
                            <p id="dir2p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Gender
                            </p>
                        </div>

                        <div id="dir3" style="color:#ffffff;width: auto;height:6vh;">
                            <p id="dir3p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Science Popularization
                            </p>
                        </div>

                        <div id="dir4" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir4p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Urban Villages</p>
                        </div>

                        <div id="dir5" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir5p" style="font-size: 1.2rem;padding-top: 0vh;">
                                The Love of "Kissed by Light"</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content"
                style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">

                <div id="content1Key" class="k">
                    <div id="content1" class="yj">Introduction

                    </div>
                    <img src="https://2021.igem.org/wiki/images/c/ce/T--SZPT-CHINA--Inclusivity-pic-1.png"
                        style="margin-top: 50px;margin-left: 292px;">
                    <div class="tz">Figure 1. Invited expert Wu Jie to conduct offline lecture for us on July 26, 2021
                    </div>
                    <div class="pb">
                        How do we get everyone into science?
                        <br>


                        <strong>It is the original intention and mission of our team's inclusivity module to enable everyone to
                        open the door of science. </strong>Better carry out the activities of this module, teacher Wu Jie gave us
                        offline guidance to let us know "move ourselves first and then others." Therefore, adhering to
                        the purpose of "respecting others first", we always remember our original intention and mission.
                        How can we make more and more people understand synthetic biology? How to make more people from
                        other fields join our project? For these problems, we divided the activities into four parts:
                        gender, science popularization, urban villages and the love of “Kissed by Light”.
                    </div>

                </div>
                <div id="content2Key" class="k">
                    <div id="content2" class="yj">Gender

                    </div>

                    <div class="pb">
                        Sexism happens from time to time in most areas. Do only men have the key to open the door of
                        science?

                    </div>



                    <img src="https://2021.igem.org/wiki/images/2/20/T--SZPT-CHINA--Inclusivity-pic-2.png"
                        style="margin-top: 50px;margin-left: 276px;">
                    <div class="tz">Figure 2. Team members </div>

                    <img src="https://2021.igem.org/wiki/images/a/a0/T--SZPT-CHINA--Inclusivity-pic-3.png"
                        style="margin-top: 50px;margin-left: 278px;">
                    <div class="tz">Figure 3. PIs</div>

                    <div class="pb">
                        Obviously not. We analyzed the gender ratio of our team members.<span style="font-weight: 900;">
                            The
                            gender ratio of our team members </span> is
                        11:3, including 11 women and 3 men;<span style="font-weight: 900;"> The sex ratio of our PIs
                        </span>is
                        1:1; <span style="font-weight: 900;">Our instructor </span>is also a woman. In
                        addition, our team found that <span style="font-weight: 900;">most of the participants
                        </span>were
                        women.
                    </div>
                </div>
                <div id="content3Key" class="k">
                    <div id="content3" class="yj">
                        Science
                    </div>

                    <div class="pb">
                        Today, <span style="font-weight: 900;">there are 7111 languages in the world</span> and this
                        number
                        is
                        still changing. China is a multi-ethnic
                        and multilingual country with 56 nationalities and <span style="font-weight: 900;">more than 80
                            languages. The impact of the language
                            differences </span>on our understanding of knowledge and the world should not be
                        underestimated.
                        Our
                        team does
                        not want language to become <span style="font-weight: 900;">an obstacle to people's move towards
                            science.</span> Therefore, our team cooperated
                        with all our partners and begged them to provide us with the local accent, so that we could
                        gather
                        into
                        a
                        new book, <span style="font-weight: 900;">"audiobook"</span>.
                    </div>

                    <div class="ej">
                        Languages
                    </div>
                    <img src="https://2021.igem.org/wiki/images/b/b8/T--SZPT-CHINA--Inclusivity-pic-4.png"
                        style="margin-top: 50px;margin-left: 231px;">
                    <div class="tz">Figure 4. Picture book cover </div>

                    <!-- English, Mandarin, Cantonese, Chaoshan,
                
                     Shaanxi Guanzhong, Shandong Heze, Tangshan Laoting, Sichuan -->
                    <div style="display: flex;">
                        <div>
                            <div>
                                <audio controls class="au">

                                    <source src="https://2021.igem.org/wiki/images/f/f9/T--SZPT-CHINA--ysdw-English.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                English
                            </div>
                        </div>
                        <div>
                            <div>
                                <audio controls class="au">
                                    <source
                                        src="https://2021.igem.org/wiki/images/5/55/T--SZPT-CHINA--ysdw-Mandarin.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                Mandarin
                            </div>
                        </div>
                        <div>
                            <div>
                                <audio controls class="au">

                                    <source
                                        src="https://2021.igem.org/wiki/images/1/16/T--SZPT-CHINA--ysdw-Cantonese.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                Cantonese
                            </div>
                        </div>
                        <div>
                            <div>
                                <audio controls class="au">
                                    <source
                                        src="https://2021.igem.org/wiki/images/f/fe/T--SZPT-CHINA--ysdw-Chaoshan.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                Chaoshan
                            </div>
                        </div>
                    </div>
                    <!-- Liaoning, Heilongjiang, Northeast, Henan Anyang,  -->
                    <div style="display: flex;">
                        <div>
                            <div>
                                <audio controls class="au">

                                    <source
                                        src="https://2021.igem.org/wiki/images/6/65/T--SZPT-CHINA--ysdw-Liaoning.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                Liaoning
                            </div>
                        </div>
                        <div>
                            <div>
                                <audio controls class="au">
                                    <source
                                        src="https://2021.igem.org/wiki/images/d/da/T--SZPT-CHINA--ysdw-Heilongjiang.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                Heilongjiang
                            </div>
                        </div>
                        <div>
                            <div>
                                <audio controls class="au">

                                    <source
                                        src="https://2021.igem.org/wiki/images/f/ff/T--SZPT-CHINA--ysdw-Northwest.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                Northeast
                            </div>
                        </div>
                        <div>
                            <div>
                                <audio controls class="au">
                                    <source src="https://2021.igem.org/wiki/images/2/28/T--SZPT-CHINA--ysdw-Henan.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                Henan Anyang
                            </div>
                        </div>
                    </div>

                    <!-- Shaanxi Guanzhong, Shandong Heze, Tangshan Laoting, Sichuan -->
                    <div style="display: flex;">
                        <div>
                            <div>
                                <audio controls class="au">

                                    <source src="https://2021.igem.org/wiki/images/8/8c/T--SZPT-CHINA--ysdw-Shaanxi.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                Shaanxi Guanzhong
                            </div>
                        </div>
                        <div>
                            <div>
                                <audio controls class="au">
                                    <source
                                        src="https://2021.igem.org/wiki/images/d/d1/T--SZPT-CHINA--ysdw-Shandong.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                Shandong Heze
                            </div>
                        </div>
                        <div>
                            <div>
                                <audio controls class="au">

                                    <source
                                        src="https://2021.igem.org/wiki/images/9/98/T--SZPT-CHINA--ysdw-Tangshan.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                Tangshan Laoting
                            </div>
                        </div>
                        <div>
                            <div>
                                <audio controls class="au">
                                    <source src="https://2021.igem.org/wiki/images/2/2e/T--SZPT-CHINA--ysdw-Sichuan.mp3"
                                        type="audio/mpeg">
                                    您的浏览器不支持 audio 元素。
                                </audio>
                            </div>
                            <div class="auFont">
                                Sichuan
                            </div>
                        </div>
                    </div>

                    <div class="tz">For details, please click to listen to our audio</div>



                    <img src="https://2021.igem.org/wiki/images/0/0b/T--SZPT-CHINA--Inclusivity-pic-5gif.gif"
                        style="margin-top: 50px;margin-left: 43px;width: 990px;">
                    <div class="tz">Figure 5. Audiobooks influence zone</div>

                    <div class="pb">
                        We have produced <span style="font-weight: 900;">audiobooks in 12 languages, </span>including
                        English, Mandarin, Cantonese, Chaoshan, Liaoning, Heilongjiang, Northeast, Henan Anyang, Shaanxi
                        Guanzhong, Shandong Heze, Tangshan Laoting, Sichuan.These books are not only convenient
                        for
                        ordinary readers, especially for
                        <span style="font-weight: 900;">the
                            visually impaired. </span>It<span style="font-weight: 900;"> brings great convenience
                        </span>to
                        understand our project and synthetic biology.
                        Multilingual audiobooks make our <span style="font-weight: 900;">audience countless </span>in
                        other
                        countries in Europe, Africa, North America
                        and South America except people all over China. Of course, there is still room for improvement
                        in
                        this
                        part. The number of languages we collect is only the tip of the iceberg of the total number of
                        global
                        languages. Therefore, we will <span style="font-weight: 900;">continue to collect local
                            dialects</span>
                        and do our best to let the voices
                        belonging to all parts of the world enter the scientific world in the future.
                    </div>

                    <div class="ej">
                        Science as Art
                    </div>

                    <div class="pb">
                        There will be an <span style="font-weight: 900;">artistic </span>atmosphere in the development
                        of
                        science, and the elements of <span style="font-weight: 900;">science will be
                            incorporated in </span>the development of art. Therefore, our team combined science and art
                        and
                        organized a
                        series of activities.
                    </div>

                    <div class="sj">
                        Fluorescent Protein DIY
                    </div>

                    <img src="https://2021.igem.org/wiki/images/3/3e/T--SZPT-CHINA--Inclusivity-pic-6.png"
                        style="margin-top: 50px;margin-left: 312px;">
                    <div class="tz">Figure 6. Organize fluorescent protein DIY activity in the school laboratory on May
                        11,
                        2021
                    </div>

                    <img src="https://2021.igem.org/wiki/images/5/5f/T--SZPT-CHINA--Inclusivity-pic-7.png"
                        style="margin-left: 310px;margin-top: 50px;">
                    <div class="tz">Figure 7. Results of the fluorescent protein DIY activity held in the school
                        laboratory
                        on May 11, 2021</div>

                    <div class="pb">
                        We convened <span style="font-weight: 900;">more than 80 </span>non-biological college students
                        for
                        fluorescent protein DIY activities, to
                        participate on<span style="font-weight:900"> May 8, May 11, and May 13.</span> They followed the
                        steps
                        we had taught and drew their favorite
                        patterns on the medium. We believed they have gained a lot of knowledge. We found that this
                        group of
                        people were <span style="font-weight:900">very interested in </span>synthetic biology and we
                        <span style="font-weight: 900;">will definitely continue</span> to use these activities
                        in the future.

                    </div>
                </div>
                <div id="content4Key" class="k">
                    <div id="content4" class="yj">
                        Urban Villages (Biology Popularization)
                    </div>
                    <div style="display: flex;">
                        <img src="https://2021.igem.org/wiki/images/4/4f/T--SZPT-CHINA--Inclusivity-pic-28.png"
                            style="margin-top: 50px;margin-left:-4px;width: 600px;">
                        <img src="https://2021.igem.org/wiki/images/1/18/T--SZPT-CHINA--Inclusivity-pic-29.png"
                            style="margin-top: 50px;margin-left:40px;width: 600px;">

                    </div>
                    <div style="display: flex;">
                        <img src="https://2021.igem.org/wiki/images/a/ae/T--SZPT-CHINA--Inclusivity-pic-30.png"
                            style="margin-top: 50px;margin-left:-7px;width: 525px;">
                        <img src="https://2021.igem.org/wiki/images/a/ad/T--SZPT-CHINA--Inclusivity-pic-31.png"
                            style="margin-top: 50px;margin-left:34px;width: 534px;">

                    </div>
                    <div class="tz">Figure 8. Representative maps of the urban villages</div>

                    <div class="pb">
                        Urban villages refer to residential areas that lag behind the pace of development of the times,
                        are separated from modern urban management, and with low living standards in the process of
                        rapid
                        urban
                        development.
                        <br>
                        <br>
                        The residents in the urban villages generally have low economic income, low cultural quality,
                        large
                        population density, narrow living space and poor living environment. The phenomenon of random
                        erection
                        of various wires, random charging of electric bicycles, abandonment of stacked furniture and
                        other
                        combustibles is serious. With great potential fire hazards, but residents' awareness of
                        prevention
                        is
                        weak. According to the interview with firefighters at Xili Fire Station, the probability of fire
                        in
                        urban villages is much higher than that in other urban residential areas. As an economically
                        developed
                        area, there are still many urban villages in Shenzhen due to historical reasons. These urban
                        villages
                        are inhabited by a large number of migrant workers and builders.
                        <br>
                        <br>
                        There are many residents and young people in urban villages, and many children travel from their
                        homes
                        in the countryside to the city during the winter and summer vacations to reunite with their
                        parents
                        who
                        work here. Therefore, our team decided to carry out educational activities for young people in
                        urban
                        villages, popularize science and synthetic biology, and raise young people's awareness of fire
                        and
                        burn prevention, hoping that they will bring them back to their hometown and pass it on to more
                        people.
                    </div>
                    <div class="ej">Teaching in Urban Villages as Volunteers</div>
                    <div class="pb">
                        By focusing on the growth and education of <strong>migrant children</strong> in the Pearl River
                        Delta, we
                        continuously
                        provide high-quality <strong>companionship</strong> and <strong>educational activities</strong>
                        for
                        migrant children. While making up
                        for
                        the <strong>lack of family companionship</strong> of migrant children, we help them integrate
                        into
                        the community and
                        stimulate their learning interest and learning motivation, and support them to be warm-hearted
                        and
                        powerful. At the same time, <strong>we stimulate their interest and motivation in learning
                            science,
                            biology
                            and
                            synthetic biology.</strong>
                    </div>

                    <img src="https://2021.igem.org/wiki/images/8/81/T--SZPT-CHINA--Inclusivity-pic-9.png"
                        style="margin-top: 50px;margin-left:239px;">
                    <div class="tz">
                        Figure 9. One of the city support teaching photos
                    </div>

                    <div class="pb">
                        In the same city, children of the same age receive different levels of education. Our team
                        turned
                        our
                        attention to children in urban villages. During the summer vacation, we gathered <span
                            style="font-weight: 900;">70 children from urban
                            villages </span>to carry out urban education support activities.
                        <span style="font-weight: 900;">The feedback</span> we got after the event: <span
                            style="font-weight: 900;">Not only the children, but
                            their parents knew well about our
                            project.</span>
                    </div>
                    <div class="ej">Synthetic Biology Picture Book Presentation</div>

                    <img src="https://2021.igem.org/wiki/images/c/c0/T--SZPT-CHINA--Inclusivity-pic-10.png"
                        style="margin-top: 50px;margin-left:296px;">
                    <div class="tz">
                        Figure 10. Went to the urban villages for a picture book presentation on August 8, 2021
                    </div>

                    <div class="pb">
                        In order to better carry out <span style="font-weight: 900;">synthetic biology and
                            popularize</span>
                        it for
                        children in urban villages, we made
                        use of the <span style="font-weight: 900;">picture book </span>made by our team. Look at the
                        photo!
                        The
                        children are listening carefully. We
                        <span style="font-weight: 900;">found </span>that these children's English level was <span
                            style="font-weight: 900;">much lower than </span>that of the children in the city center
                        during the presentation.
                    </div>


                    <div class="ej">English Class of Synthetic Biology</div>

                    <img src="https://2021.igem.org/wiki/images/7/71/T--SZPT-CHINA--Inclusivity-pic-11.png"
                        style="margin-top: 50px;margin-left:284px;width: 550px;">
                    <div class="tz">
                        Figure 11. Carried out English classes in urban villages on August 12,2021
                    </div>

                    <img src="https://2021.igem.org/wiki/images/d/d2/T--SZPT-CHINA--Inclusivity-pic-12.png"
                        style="margin-top: 50px;margin-left:284px;width: 550px;">
                    <div class="tz">
                        Figure 12. Played synthetic biology playing cards with children on August 12, 2021
                    </div>

                    <div class="pb">
                        After discovering that the children in the urban villages have <span
                            style="font-weight: 900;">low
                            English proficiency</span>, we taught them
                        synthetic biology <span style="font-weight: 900;">in English</span>. What's more, we used our
                        <span style="font-weight: 900;">self-made </span>English <span style="font-weight: 900;">
                            version of
                            synthetic biology
                            playing cards </span>to popularize synthetic biology for children. Even if their
                        pronunciation
                        is
                        not very
                        accurate, we could still feel their <span style="font-weight: 900;">passion </span>for synthetic
                        biology.
                    </div>

                    <video src="https://2021.igem.org/wiki/images/f/fa/T--SZPT-CHINA--Inclusivity-video-1.mp4" controls
                        style="margin-top: 50px;margin-left: 37px;"> </video>

                    <div class="tz">For details, please click to watch the video</div>

                    <div class="ej">Art Design of Synthetic Biology</div>

                    <img src="https://2021.igem.org/wiki/images/6/6e/T--SZPT-CHINA--Inclusivity-pic-13.png"
                        style="margin-top: 50px;margin-left:284px;width: 550px;">
                    <div class="tz">
                        Figure 13. Made a drawing on a paper plate with the children in the urban villages on August 14,
                        2021
                    </div>

                    <div class="pb">
                        In order to let <span style="font-weight: 900;">the children in the urban villages </span>have
                        a<span style="font-weight: 900;"> deeper understanding </span>of the bacteria in life,
                        our team worked with the children to <strong>draw</strong> the "<strong>bacteria in our
                            hands</strong>". We can see that children's
                        cognition of bacteria has reached a higher level from the works in the picture.
                    </div>

                    <video src="https://2021.igem.org/wiki/images/4/44/T--SZPT-CHINA--Inclusivity-video-2.mp4" controls
                        style="margin-top: 50px;margin-left: 78px;"> </video>

                    <div class="tz">For details, please click to watch the video</div>

                    <img src="https://2021.igem.org/wiki/images/6/62/T--SZPT-CHINA--Inclusivity-pic-14.png"
                        style="margin-top: 50px;margin-left:284px;width: 550px;">
                    <div class="tz">
                        Figure 14. Used cartoon paper-cutting to tell stories for children in urban villages on August
                        23,
                        2021
                    </div>



                    <img src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--Inclusivity-pic-15.png"
                        style="margin-top: 50px;margin-left:284px;width: 550px;">
                    <div class="tz">
                        Figure 15. Made cartoon paper-cutting process from August 15 to 20, 2021
                    </div>


                    <div class="pb">
                        <span style="font-weight: 900;">The art of paper-cutting </span>is one of the traditional
                        cultures
                        of the
                        Chinese nation. We used this art to
                        perform a paper-cutting play of <span style="font-weight: 900;">"Little Biology"</span> for
                        children.
                        Tell the children how cells divide, how
                        bacteria multiply, how viruses infect cells, etc... Later, children could already tell in their
                        own
                        words! We believed that this "play" should be seen <span style="font-weight: 900;">by more
                            children
                            in
                            backward areas or people in the
                            non-biological field,</span> so we recorded the play as a video and posted it on social
                        platforms.
                    </div>
                    <video src="https://2021.igem.org/wiki/images/a/a4/T--SZPT-CHINA--Inclusivity-video-3.mp4" controls
                        style="margin-top: 50px;margin-left: 63px;"> </video>

                    <div class="tz">For details, please click to watch the video</div>

                    <div class="ej">Handmade of Synthetic Biology</div>

                    <img src="https://2021.igem.org/wiki/images/d/d0/T--SZPT-CHINA--Inclusivity-pic-16.png"
                        style="margin-top: 50px;margin-left:284px;width: 550px;">
                    <div class="tz">
                        Figure 16. Taught children in the urban villages to fold DNA on August 25, 2021
                    </div>

                    <div class="pb">We <span style="font-weight: 900;">use the theory of genetic control of traits to
                            popularize
                        </span>"why our appearance
                        characteristics are similar to those of our parents" for children in urban villages. Genes are
                        effectively inherited DNA fragments, so we taught children to <span
                            style="font-weight: 900;">fold
                            DNA</span>. We found that children were very
                        interested in DNA. After we finished the course of the day, <span style="font-weight: 900;">
                            many
                            parents came to us </span>and asked: Is there
                        a DNA folding tutorial? We also want to learn. </div>

                    <div style="display: flex;">

                        <video src="https://2021.igem.org/wiki/images/f/f8/T--SZPT-CHINA--Inclusivity-video-4.mp4"
                            controls style="margin-top: 50px;margin-left: 10px;width: 500px;"> </video>
                        <video src="https://2021.igem.org/wiki/images/a/a3/T--SZPT-CHINA--Inclusivity-video-5.mp4"
                            controls style="margin-top: 50px;margin-left: 47px;width: 500px;"> </video>
                    </div>


                    <div class="tz">For details, please click to watch the videos</div>


                    <div class="ej">Game Play of Synthetic Biology</div>


                    <img src="https://2021.igem.org/wiki/images/f/fd/T--SZPT-CHINA--Inclusivity-pic-17.png"
                        style="margin-top: 50px;margin-left:284px;width: 550px;">
                    <div class="tz">
                        Figure 17. Played jigsaw puzzles of synthetic biology with children on August 27, 2021
                    </div>

                    <div class="pb">
                        In order to <span style="font-weight: 900;">increase the interestingness</span> we made <span
                            style="font-weight: 900;">puzzles</span> and playing cards related to synthetic biology
                        for children in urban villages. Children have fun while learning biology in this process.
                    </div>

                    <video src="https://2021.igem.org/wiki/images/7/70/T--SZPT-CHINA--Inclusivity-video-6.mp4" controls
                        style="margin-top: 50px;margin-left: 59px;"> </video>

                    <div class="tz">For details, please click to watch the video</div>

                    <div class="ej">The Knowledge of Synthetic Biology and Fire Prevention </div>


                    <img src="https://2021.igem.org/wiki/images/3/36/T--SZPT-CHINA--Inclusivity-pic-18.png"
                        style="margin-top: 50px;margin-left:284px;width: 550px;">
                    <div class="tz">
                        Figure 18. Preached knowledge about burn prevention in urban villages in Guangzhou on July 13,
                        2021
                    </div>

                    <img src="https://2021.igem.org/wiki/images/c/c3/T--SZPT-CHINA--Inclusivity-pic-19.png"
                        style="margin-top: 50px;margin-left:284px;width: 550px;">
                    <div class="tz">
                        Figure 19. Had jigsaw presentation in Xiamen on July 13, 2021
                    </div>

                    <img src="https://2021.igem.org/wiki/images/e/e5/T--SZPT-CHINA--Inclusivity-pic-20.png" class="pb"
                        style="margin-left: 284px;width: 550px;">
                    <div class="tz">
                        Figure 20. Played a video on burn knowledge in Chaoshan on July 13, 2021


                    </div>

                    <div class="pb">We took use of summer vacation to <span style="font-weight: 900;">preach </span>our
                        project
                        and knowledge of synthetic biology to
                        <span style="font-weight: 900;">the elderly in our family and the people in the non-biological
                            fields
                        </span>around us. During this period, we
                        found that many elderly people were wrong in their first treatment after burns. We realized that
                        the
                        elderly is one of the most important targets for us. But just the elderly around us is not
                        enough.
                        We
                        will go to a place where there are <span style="font-weight: 900;">more elderly people</span>
                        and
                        popularize this kind of knowledge for them <span style="font-weight: 900;">in
                            the future.</span>
                    </div>


                    <div class="ej">Summary of the Urban Villages Module </div>

                    <div class="pb">
                        In addition to the above six parts, we also let the children from the urban villages walk into
                        our
                        project. In the process of making videos related to synthetic biology and other work, they
                        embarked
                        on a
                        path that they had never taken before. They helped us dubbing, crafting... <span
                            style="font-weight: 900;">They let the world hear their
                            voices through our platform.</span> We found that the children were looking forward to our
                        coming.
                        According to
                        the feedback of parents, children were waiting for the release of our courses every day, but we
                        knew
                        that it was not enough to preach synthetic biology in one urban village. In the future, <span
                            style="font-weight: 900;">we will continue
                            to go to other regions and pave the way for children in urban villages to learn science and
                            synthetic
                            biology.</span>
                        <br>
                        <br>
                        Certainly, there is a lot of advocacy and popular science that we have done on the team's social
                        platform with regard to fire prevention and burn prevention.
                    </div>
                </div>
                <div id="content5Key" class="k">
                    <div id="content5" class="yj">
                        The Love of "Kissed by Light"
                    </div>

                    <div style="display: flex;">
                        <img src="https://2021.igem.org/wiki/images/b/b6/T--SZPT-CHINA--Inclusivity-pic-21.png"
                            style="margin-top: 50px;margin-left: 70px;width: 400px;height: 400px;">
                        <img src="https://2021.igem.org/wiki/images/b/ba/T--SZPT-CHINA--Inclusivity-pic-22.png"
                            style="margin-top: 50px;margin-left: 119px;width: 400px;height: 400px;">
                    </div>
                    <div class="tz">Figure 21. Synthetic biology playing cards</div>
                    <img src="https://2021.igem.org/wiki/images/5/5f/T--SZPT-CHINA--Inclusivity-pic-23.png"
                        style="margin-top: 50px;margin-left:256px;">
                    <div style="display: flex;">
                        <img src="https://2021.igem.org/wiki/images/4/4b/T--SZPT-CHINA--Inclusivity-pic-24.png"
                            style="margin-top: 50px;margin-left:0px;width:  300px;">
                        <img src="https://2021.igem.org/wiki/images/1/1c/T--SZPT-CHINA--Inclusivity-pic-25.png"
                            style="margin-top: 50px;margin-left:94px;width: 300px;">
                        <img src="https://2021.igem.org/wiki/images/1/14/T--SZPT-CHINA--Inclusivity-pic-26.png"
                            style="margin-top: 50px;margin-left:93px;width: 300px;">
                    </div>
                    <div class="tz">Figure 22. SZPT project element keychains</div>

                    <div class="pb">
                        In our <span style="font-weight: 900;">researches,</span> we found that the treatment costs for
                        various
                        types of severe burns range from 5w to
                        80w. This makes it difficult for many burn victims to bear such financial burdens. After the
                        guidance of
                        teacher Wu Jie, our team agreed that <span style="font-weight: 900;">"Charity Sale"</span> is
                        the
                        best
                        choice for <span style="font-weight: 900;">"Good Business". Every burn
                            patient should be paid attention to. </span>The SZPT-CHINA-2021 team planed a charity sale
                        in
                        this
                        year's
                        competition. We prepared some donations by selling some keychains, clothes, hats, etc. with our
                        project
                        elements,<span style="font-weight: 900;"> and donated the raised funds to burn families.</span>


                    </div>


                    <img src="https://2021.igem.org/wiki/images/3/39/T--SZPT-CHINA--Inclusivity-pic-27.png"
                        style="margin-top: 50px;margin-left: 118px;width: 800px;">
                    <div class="tz">
                        Figure 23. Donated the money obtained from the theme to the burned family on October 9, 2021
                    </div>

                    <div class="pb">We launched a charity sale with the theme of "The Love of Kissed by Light", bringing
                        together little love and gathering great energy Through this charity sale, we have carried out
                        in-depth
                        reflection. We will continue doing this in the future and let the love of light kiss sway on the
                        road of
                        synthetic biology.</div>
                </div>
            </div>
            <div id="red"
                style="float: left;margin-left: 140px; height: 18000px;width: 55px;background-color: #d44225;">
            </div>
        </div>
        <div>
            <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic"
                style="margin-top: -372px;width: 1920px;"></image>
        </div>
    </div>
</body>
<style>
    .yj {
        margin-top: 50px;
    }

    .k {
        box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
        padding: 50px;
        margin-top: 50px;
    }

    .au {
        margin-left: 55px;
        width: 195px;
        margin-top: 30px;
    }

    .auFont {
        text-align: center;
        padding-left: 53px;
        margin-top: 20px;
    }
</style>
<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;

            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/18000/, "22000")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/18000/, "22000")
            $("#red").attr("style", value);

            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir1").attr("style", value);

            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);


            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir3").attr("style", value);

            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir4").attr("style", value);

            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/6vh/, "3vh")
            $("#dir5").attr("style", value);


            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir3p").attr("style", value);

            var value = document.getElementById('dir4p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir4p").attr("style", value);

            var value = document.getElementById('dir5p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir5p").attr("style", value);






            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>